<%@ page contentType="text/html;charset=UTF-8"%>
<%@include file="../../common/sessionValidate.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html lang="UTF-8">
  <head>
    <title>T_product_spec_options信息维护</title>
    <%@ include file="../../common/meta.jsp"%>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
	<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <link rel="stylesheet" href="<%=basePath%>css/my-bootstrap.css" media="screen"  id="tuserskin">
    <link rel="stylesheet" href="<%=basePath%>js/toastr/toastr.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css">
    <script type="text/javascript" src="<%= basePath %>js/jquery.cookie.js"></script>
  </head>
  <style>
hr {
    margin-top:1px;
    border-bottom: 1px solid #1BBC9B;
}
  </style>
  <body>

  <div class="" style="margin-right:2px;padding-right:1px;">

   <!-------------------------- 面板  start--------------------------------->
	<div class="panel panel-primary" >
	  <div class="panel-heading clearfix"  id="">
	  <h5 class='modal-title'>属性选项值信息</h5>
	  </div>
	  <div class="panel-body">
           <div class="row" >
                <h5>&nbsp;&nbsp;属性名信息</h5>
	            <hr>
            	<div class="col-xs-6"><!--start 换列-->
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-xs-3">商品种类名称</label>
                            <div class="col-xs-9">
                                <input id="vpname" name="vpname" type="text" class="form-control" placeholder="pname" readonly="true" />
                            </div>
                        </div>
                    </div>

                <!--如果输入元素是偶数个元素，在n=size/2?int时输出2列格式；如果元素是奇数个，需要在n=size/2?int时输出2列格式；需要换列，每行最多显示2列-->
                </div><!--end 换列--><!--start 换列-->
                <div class="col-xs-6">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-xs-3"> 属性名</label>
                            <div class="col-xs-9">
                                <input id="vspec_name" name="vspec_name" type="text" class="form-control" placeholder="spec_name"  readonly="true" />
                                <input id="vspec_id" name="vspec_id" type="text" class="form-control" placeholder="spec_id"  readonly="true"/>
                            </div>
                        </div>
                    </div>
				</div><!--end 换列-->
            </div><!--end row-->

            <div class="row" >
                <h5>&nbsp;&nbsp;属性选项信息</h5>
	            <hr>
            	<div class="col-xs-6"><!--start 换列-->
                    <div class="col-xs-12">
					    <table id="grid" class="table table-condensed table-striped table-bordered table-hover" class="sortable" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
					     <thead id="grid_head">
					      <tr>
					          <th onclick="sortTableT.sort('grid',0,'String')">主键</th>
					          <th onclick="sortTableT.sort('grid',0,'String')">属性名称id</th>
					          <th onclick="sortTableT.sort('grid',0,'String')">属性值</th>
					          <th style="width:150px">操作&nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-plus" style='color:rgb(0, 128, 255)'>
					          <a href="javascript:showSpecAddDiv()">新增</a></i></th>
					      </tr>
					     </thead>
					     <tbody id="grid_body"></tbody>
					    </table>
                    </div>
               </div>
            </div><!--end row-->
       </div><!--end body-->

	   <div class="modal-footer bg-info " id=''>
	      <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal" onclick="history.go(-1)">返回</button>
	   </div>
    </div>
    <!--------------------------面板 end------------------------------------>

    <!--------------------------添加/修改/查看 信息的弹出层start--------------------------->
	<div id="add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog"  style="width:100%;">
	        <div class="modal-content">
	            <div class="modal-header  label-primary" id="addHeaderDiv">

	            </div>
	            <form class="form-horizontal form-bordered form-row-strippe" name="ffAdd" id="ffAdd" mentod="post" role="form" data-toggle="validator" enctype="multipart/form-data">
	                <div class="modal-body">
	                    <!--<div class="row"  style="border:1px solid #dddddd;"> -->
	                    <div class="row" >

	                    <hr>
	                    	<div class="col-xs-6"><!--start 换列-->
		                        <div class="col-xs-12">
		                            <div class="form-group">
		                                <label class="control-label col-xs-2"> 主键id</label>
		                                <div class="col-xs-10">
		                                    <input id="spec_option_id" name="spec_option_id" type="text" class="form-control" placeholder="spec_option_id" readonly="true"/>
		                                </div>
		                            </div>
		                        </div>
		                        <div class="col-xs-12">
		                            <div class="form-group">
		                                <label class="control-label col-xs-2"> 属性名称</label>
		                                <div class="col-xs-10">
		                                    <input id="spec_name" name="spec_name" type="text" class="form-control" placeholder="spec_name"  readonly="true"/>
		                                    <input id="spec_id" name="spec_id" type="text" class="form-control" placeholder="spec_id"  readonly="true"/>
		                                </div>
		                            </div>
		                        </div>
		                    <!--如果输入元素是偶数个元素，在n=size/2?int时输出2列格式；如果元素是奇数个，需要在n=size/2?int时输出2列格式；需要换列，每行最多显示2列-->
		                    </div><!--end 换列--><!--start 换列-->
		                    <div class="col-xs-6">
		                        <div class="col-xs-12">
		                            <div class="form-group">
		                                <label class="control-label col-xs-2">属性值</label>
		                                <div class="col-xs-10">
		                                    <input id="spec_option_val" name="spec_option_val" type="text" class="form-control" placeholder="spec_option_val" />
		                                </div>
		                            </div>
		                        </div>
							</div><!--end 换列-->
	                    </div>
	                </div>
	                <div class="modal-footer bg-info" id="buttonDiv">

	                </div>
	            </form>
	        </div>
	    </div>
	</div>
	<!--------------------------添加/修改/查看 信息的弹出层 end---------------------------->

  </div>
  </body>
</html>

<script src="<%=basePath%>js/bootstrap.min.js"></script>
<!--<script src="<%=basePath%>js/jquery-1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>-->
<script src="<%=basePath%>js/bootstrap-paginator.min.js"></script>
<script src="<%=basePath%>/js/respond.js"></script>
<script src="<%=basePath%>/js/html5.js"></script>
<script src="<%=basePath%>js/toastr/toastr.js"></script>
<script src="<%=basePath%>js/bootbox.js"></script>
<script src="<%=basePath%>js/jquery.validate.js"></script>
<!-- <script src="<%=basePath%>js/additional-methods.min.js"></script> -->
<script src="<%=basePath%>js/my-jquery-curd.js"></script>
<script src="<%= basePath %>js/tableSortTool.js" ></script>
<script src="<%= basePath %>js/calendar.js" ></script>
<script type="text/javascript">
//1、初始化数据显示
var name;
var opType;
var id;
var pname;
var spec_name;

//新增属性名称层
function showSpecAddDiv(){
	$("#add").modal("show");
	$("#ffAdd")[0].reset();/*重置表单*/
	var basePath="<i class='icon-plus'></i>&nbsp;";//设置addHeaderDiv标题文字及按钮
	setHeader2("新增属性选项值", basePath);
	setButtonDivAdd();//设置adddiv的 操作按钮

	var spec_name = $("#vspec_name").val();
	var spec_id = $("#vspec_id").val()
	//alert("tanchu spec_name="+spec_name+";spec_id="+spec_id);
	$("#spec_name").val(spec_name);
	$("#spec_id").val(spec_id);
	$("#opType").val("add");
	//$("#addSaveButton").removeAttr("disabled");
}

//查看属性名称层
function showSpecViewDiv(spec_option_id, spec_option_val){
	$("#add").modal("show");
	var basePath="<i class='icon-eye-open'></i>&nbsp;";//设置addHeaderDiv标题文字及按钮
	setHeader2("查看属性选项值", basePath);
	setButtonDivView();//设置adddiv的 操作按钮
	formReadOnly('ffAdd');//设置表单不可修改

	//$("#addSaveButton").attr("disabled", true);
	$("#ffAdd")[0].reset();/*重置表单*/
	var spec_name = $("#vspec_name").val();
	var spec_id = $("#vspec_id").val()
	//alert("tanchu spec_name="+spec_name+";spec_id="+spec_id);
	$("#spec_name").val(spec_name);
	$("#spec_id").val(spec_id);
	$("#spec_option_val").val(spec_option_val);
	$("#spec_option_id").val(spec_option_id);
	$("#opType").val("view");
}

//查看属性名称层
function showSpecEditDiv(spec_option_id, spec_option_val){
	$("#add").modal("show");
	var basePath="<i class='icon-pencil'></i>&nbsp;";
	setHeader2("修改属性选项值", basePath);//设置addHeaderDiv标题文字及按钮
	setButtonDivEdit();//设置adddiv的 操作按钮

	$("#addSaveButton").removeAttr("disabled");
	$("#ffAdd")[0].reset();/*重置表单*/
	var spec_name = $("#vspec_name").val();
	var spec_id = $("#vspec_id").val()
	//alert("tanchu spec_name="+spec_name+";spec_id="+spec_id);
	$("#spec_name").val(spec_name);
	$("#spec_id").val(spec_id);
	$("#spec_option_val").val(spec_option_val);
	$("#spec_option_id").val(spec_option_id);
	$("#opType").val("edit");
}

//新增保存数据
function add() {
	$("#addSaveButton").attr("disabled", true);
	var url = "<%=basePath%>t_product_spec_options/saveT_product_spec_options?time="+Math.random();
	var postData = $("#ffAdd").serializeArray();
	//alert("postData="+postData);
    $.post(url, postData, function (data) {
    	//var data = $.parseJSON(data);
        if (data.result=="success") {
            //保存成功  1.关闭弹出层，
          	showSuccessTips("恭喜保存成功!", "提示");
          	//刷新
            loadSpec_optionsList("add", spec_id);
        }
        else {
            $("#addSaveButton").removeAttr("disabled");
        	showErrorTips("保存数据失败!", "错误信息：");
        	return false;
        }
    }).error(function () {
        $("#addSaveButton").removeAttr("disabled");
    	showErrorTips("保存数据失败!", "错误信息：");
    });
}

//更新修改数据到后台
function edit(){
	$("#editSaveButton").attr("disabled", true);
	var url = "<%=basePath%>t_product_spec_options/updateT_product_spec_options?time="+Math.random();
    var postData = $("#ffAdd").serializeArray();
   	$.post(url, postData, function (data) {
    	//var data = $.parseJSON(json);
        if (data.result=="success") {
          	showSuccessTips("恭喜修改成功", "提示");
          	//刷新
            loadSpec_optionsList("edit", $("#spec_id").val());
        }
        else {
        	$("#editSaveButton").removeAttr("disabled");
        	showErrorTips("修改数据失败!", "错误信息：");
        }
    }).error(function () {
    	$("#editSaveButton").removeAttr("disabled");
    	showErrorTips("修改数据失败!", "错误信息：");
    });

}

function loadSpec_optionsList(opType, id){
	var url = "<%=basePath%>t_product_spec_options/getAllT_product_spec_options?spec_id="+id+"&startIndex=0&pageSize=1000&time="+Math.random();
	//alert(url);
	$.getJSON(url, function (data){
		$("#grid_body").html("");
		//alert("stop run wait ");
	    $.each(data.items, function(i,item){
	    	//alert("wait every each!");
			var str="<tr>";
			str+="<td>"+doNull(item.spec_option_id)+"</td>";
			str+="<td>"+doNull(item.spec_id)+"</td>";
			str+="<td>"+doNull(item.spec_option_val)+"</td>";
			str+="<td>&nbsp;&nbsp;";
			str+="<a href='javascript:showSpecViewDiv("+item.spec_option_id+",\""+item.spec_option_val+"\")' class='text-danger'>&nbsp;&nbsp;<span class='glyphicon glyphicon-search' style='color:rgb(0, 128, 255)'></span>&nbsp;&nbsp;</a>";
			str+="<a href='javascript:showSpecEditDiv("+item.spec_option_id+",\""+item.spec_option_val+"\")' class='text-danger'>&nbsp;&nbsp;<span class='icon-pencil'  style='color:rgb(0, 128, 255)'></span>&nbsp;&nbsp;</a>";
			str+="<a href='javascript:del("+item.spec_option_id+")' class='text-danger'>&nbsp;&nbsp;<span class='icon-remove' style='color:rgb(0, 128, 255)'></span></a>&nbsp;&nbsp;";
			str+="</td>";
			str+="</tr>";
			$("#grid_body").append(str);
		});//end each data;
	});//end getJSON;
}

//初始化页面及校验
$().ready(function(){
	name = "商品种类属性值";
	opType ='<%=request.getParameter("oplx")%>';
	id='<%=request.getParameter("id")%>';
	spec_id = id;
	pname='<%=request.getParameter("pname")%>';
	spec_name='<%=request.getParameter("spec_name")%>';

	//初始化request值到显示区域
	$("#vpname").val(pname);
	$("#vspec_name").val(spec_name);
	$("#vspec_id").val(id);

	//alert("opType="+opType+";id="+id);
    if(opType=='edit'){
		//加载属性值选项
		loadSpec_optionsList(opType, id);
	}else if(opType=='view'){
		//加载属性值选项
		loadSpec_optionsList(opType, id);
	}

	//2、校验脚本初始化，start check
	$("#ffAdd").validate({
		submitHandler:function(form){
            //alert($("#opType").val());
            if($("#opType").val()=="add"){
            	add();
            }else if($("#opType").val()=="edit"){
            	edit();
            }
	    },
		rules: {
			spec_option_id: {
			    //required: true,
                digits: true,
			    //minlength: 1,
			    maxlength: 11
    		},
			spec_id: {
			    //required: true,
                digits: true,
			    //minlength: 1,
			    maxlength: 11
    		},
			spec_option_val: {
			    //required: true,
			    maxlength: 256
    		},
			status: {
			    //required: true,
			    maxlength: 45
    		}
	    }, //end rules;
	    messages: {
			spec_option_id: {
			    //required: " spec_option_id不能为空！",
                digits: "<font color='red'>请输入数字，不能输入非数字字符！</font>",
			    //minlength: "<font color='red'>最少输入1位！</font>",
			    maxlength: "<font color='red'> spec_option_id最大支持11位，输入的数据已经超过最大长度！</font>"
    		},
			spec_id: {
			    //required: " spec_id不能为空！",
                digits: "<font color='red'>请输入数字，不能输入非数字字符！</font>",
			    //minlength: "<font color='red'>最少输入1位！</font>",
			    maxlength: "<font color='red'> spec_id最大支持11位，输入的数据已经超过最大长度！</font>"
    		},
			spec_option_val: {
			    maxlength: "<font color='red'>属性值最大支持256位,输入的数据已经超过最大长度！</font>"
    		},
			status: {
			    maxlength: "<font color='red'>状态最大支持45位,输入的数据已经超过最大长度！</font>"
    		}
	   } //end message;
   	}); //end validate;
}) //end funciton read;

//删除函数
function del(id){
	var spec_id = $("#vspec_id").val();
	//alert("del spec_id="+spec_id);
   	var url = "<%=basePath%>t_product_spec_options/delT_product_spec_options?id=" + id+"&time="+Math.random();
 	bootbox.confirm({
		size: 'small',
		buttons: {
	            confirm: {
	                label: ' 删除 ',
	                className: 'btn btn-sm btn-danger'
	            },
	            cancel: {
	                label: '   取消     ',
	                className: 'btn btn-success btn-sm'
	            }
        },
        message: '您确认要删除选中的记录？',
        callback: function(result) {
            if(result) {
            	if(result){
            		$.get(url,function(data){
            			if("success" == data.result){
            				showSuccessTips("删除成功", "提示");
            	          	//刷新
            	            loadSpec_optionsList("add", spec_id);
            			}else{
            				showErrorTips("删除数据"+id+"失败!", "错误信息：");
            			}
            		});
            	}
             }
        },
        title:'删除记录提示：',
        className:' '
	})
}
</script>
